// 课堂练习


window.addEventListener('load', function () {
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    var index = 0;
    var w = focus.offsetWidth;
    var timer = setInterval(function () {
        index++;
        var translatex = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 2000)

    ul.addEventListener('transitionend', function () {

        if (index >= 3) {

            index = 0;
            ul.style.display = 'none';
            var translateX = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';


        } else if (index < 0) {
            index = 2;
            ul.style.transition = 'none';
            var translatex= -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';

        }
       ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current')
    
    })
    var startX = 0;
    var moveX = 0;
    // var flag = false;
    ul.addEventListener('touchstart', function(e) {
        startX = e.targetTouches[0].pageX;
        // 手指触摸的时候就停止定时器
        clearInterval(timer);
    });
    ul.addEventListener('touchmove', function (e) {
        moveX = e.targetTouches[0].pageX -  startX;
        var translatex = -index * w + moveX;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)';
        // flag = true;
        // e.preventDefault(); // 阻止滚动屏幕的行为
    })
    ul.addEventListener('touchend', function (e) {
        
    })

    })